<template>
  <view :style="{paddingBottom: safeBottom + 'px'}" style="height: 100vh;background-color: #182f4d">
    <view :style="{height: height + 'px'}"></view>
    <TnNavbar fixed alpha customBack :placeholder="false" bg-color="transparent" :bottom-shadow="false">
      <view slot="back" class='tn-custom-nav-bar__back'>
        <text class='icon tn-icon-left'></text>
        <text class='icon tn-icon-home-capsule-fill'></text>
      </view>
      <text class="text-white">精灵性格一览</text>
    </TnNavbar>
    <view class="tn-text-left" @click.stop="" style="background-color: #182f4d;width: 100%" v-if="!showLoading">
      <view class="flex margin-xs" style="margin-bottom: 0;position: sticky" :style="{top: height + 'px'}">
        <view style="width: 75px;background-color: #21365a"></view>
        <view class="flex" style="width: calc(100% - 75px);height: 30px;background-color: #21365a;color: #b7cdfe;">
          <view style="width: 20%;text-align: center;line-height: 30px">
            攻击
          </view>
          <view style="width: 20%;text-align: center;line-height: 30px">
            防御
          </view>
          <view style="width: 20%;text-align: center;line-height: 30px">
            特攻
          </view>
          <view style="width: 20%;text-align: center;line-height: 30px">
            特防
          </view>
          <view style="width: 20%;text-align: center;line-height: 30px">
            速度
          </view>
        </view>
      </view>
      <scroll-view scroll-y :style="{height: `calc(100vh - ${height + 30 +safeBottom}px)`}">
        <view v-for="(item, index) in popupData" class="flex margin-xs">
          <view style="width: 25px;background-color: #21365a;text-align: center;color: #b7cdfe"
                class="flex flex-wrap justify-center align-center">
            <view>
              <image src="/static/title.png" style="width: 10px;height: 10px"/>
              {{ index }}
            </view>
          </view>
          <view style="width: calc(100% - 25px);">
            <view
                class="flex"
                v-for="v in item"
                :key="v.id"
                style="width: 100%;height: 30px;background-color: #21365a;color: #b7cdfe;"
            >
              <view style="width: 50px;text-align: center;line-height: 30px">
                {{ v.name }}
              </view>
              <view class="flex" style="width: calc(100% - 50px);height: 30px;background-color: #21365a;color: #b7cdfe;">
                <view style="width: 20%;text-align: center;line-height: 30px">
                  <template v-if="v.atk > 1">
                    <TnIcon name="up-triangle" color="#11cd19" size="40"></TnIcon>
                  </template>
                  <template v-else-if="v.atk === 1">
                    <TnIcon name="reduce" color="#77a3db"></TnIcon>
                  </template>
                  <template v-else-if="v.atk < 1">
                    <TnIcon name="down-triangle" color="#ef7837" size="40"></TnIcon>
                  </template>
                </view>
                <view style="width: 20%;text-align: center;line-height: 30px">
                  <template v-if="v.des > 1">
                    <TnIcon name="up-triangle" color="#11cd19" size="40"></TnIcon>
                  </template>
                  <template v-else-if="v.des === 1">
                    <TnIcon name="reduce" color="#77a3db"></TnIcon>
                  </template>
                  <template v-else-if="v.des < 1">
                    <TnIcon name="down-triangle" color="#ef7837" size="40"></TnIcon>
                  </template>
                </view>
                <view style="width: 20%;text-align: center;line-height: 30px">
                  <template v-if="v.special_attack > 1">
                    <TnIcon name="up-triangle" color="#11cd19" size="40"></TnIcon>
                  </template>
                  <template v-else-if="v.special_attack === 1">
                    <TnIcon name="reduce" color="#77a3db"></TnIcon>
                  </template>
                  <template v-else-if="v.special_attack < 1">
                    <TnIcon name="down-triangle" color="#ef7837" size="40"></TnIcon>
                  </template>
                </view>
                <view style="width: 20%;text-align: center;line-height: 30px">
                  <template v-if="v.special_defense > 1">
                    <TnIcon name="up-triangle" color="#11cd19" size="40"></TnIcon>
                  </template>
                  <template v-else-if="v.special_defense === 1">
                    <TnIcon name="reduce" color="#77a3db"></TnIcon>
                  </template>
                  <template v-else-if="v.special_defense < 1">
                    <TnIcon name="down-triangle" color="#ef7837" size="40"></TnIcon>
                  </template>
                </view>
                <view style="width: 20%;text-align: center;line-height: 30px">
                  <template v-if="v.speed > 1">
                    <TnIcon name="up-triangle" color="#11cd19" size="40"></TnIcon>
                  </template>
                  <template v-else-if="v.speed === 1">
                    <TnIcon name="reduce" color="#77a3db"></TnIcon>
                  </template>
                  <template v-else-if="v.speed < 1">
                    <TnIcon name="down-triangle" color="#ef7837" size="40"></TnIcon>
                  </template>
                </view>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
    <loading-page :show="showLoading"/>
  </view>
</template>

<script setup>
  import TnNavbar from "../../uni_modules/tuniaoui-vue3/components/navbar/src/navbar.vue";
  import TnIcon from "@/uni_modules/tuniaoui-vue3/components/icon/src/icon.vue";
  import {onLoad} from '@dcloudio/uni-app'
  import {ref, getCurrentInstance} from 'vue'
  import {useUniAppSystemRectInfo} from "../../uni_modules/tuniaoui-vue3/hooks/use-uniapp-system-rect-info";
  import LoadingPage from "../../components/loadingPage.vue";

  const {height} = useUniAppSystemRectInfo().navBarInfo
  const safeBottom = ref(0)

  const {
    proxy
  } = getCurrentInstance()

  const popupData = ref({
    "攻击型": [],
    "防御型": [],
    "特攻型": [],
    "特防型": [],
    "速度型": [],
    "平衡型": []
  })

  const showLoading = ref(true)

  // 获取精灵性格
  const character = ref([])
  const getCharacter = async () => {
    character.value = await proxy.$api.getCharacterList()
    character.value.forEach(item => {
      if (item.atk > 1) {
        popupData.value["攻击型"].push(item)
      }
      if (item.des > 1) {
        popupData.value["防御型"].push(item)
      }
      if (item.special_attack > 1) {
        popupData.value["特攻型"].push(item)
      }
      if (item.special_defense > 1) {
        popupData.value["特防型"].push(item)
      }
      if (item.speed > 1) {
        popupData.value["速度型"].push(item)
      }
      if (item.atk === 1 && item.des === 1 && item.special_attack === 1 && item.special_defense === 1 && item.speed === 1) {
        popupData.value["平衡型"].push(item)
      }
    })
    showLoading.value = false
  }

  onLoad(async () => {
    uni.getSystemInfo({
      success: res => {
        safeBottom.value = res.safeAreaInsets.bottom
      }
    });
    await getCharacter()
  })
</script>


<style scoped lang="scss">

</style>
